<style scoped lang="less">
.chart {
  //   margin-top: -40px;
  .highcharts-container {
    height: 400px !important;
  }
}
</style>
<template>
  <iot-blk class="today-blk" title="一周报警" :moreType="0">
    <div :class="type == 'warehouse' ? 'chart' : ''" id="weekChart"></div>
  </iot-blk>
</template>
<script>
import HighCharts from "highcharts";
import { mapState } from "vuex";
export default {
  name: "IOTWeek",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["scale"]),
    fillOpacity() {
      let opacity = 0;
      switch (this.type) {
        case "fireControl":
        case "fire":
        case "pool":
        case "chargingStation":
          opacity = 0;
          break;
        default:
          opacity = 0.3;
          break;
      }
      return opacity;
    },
  },
  watch: {
    scale() {
      this.renderChart();
    },
  },
  data() {
    return {
      loading: false,
      chartData: null,
    };
  },
  methods: {
    renderChart() {
      let that = this;
      let width = this.scale * 390;
      let height =
        this.type == "warehouse" ? this.scale * 460 : this.scale * 200;
      let data = this.chartData;
      let options = {
        credits: {
          enabled: false,
        },
        colors: ["#5AD8A6", "#F6BD16", "#5B8FF9", "#9270CA"],
        chart: {
          type: "spline",
          width: width,
          height: height,
          backgroundColor: "transparent",
          spacing: 0,
          margin: [5],
        },
        title: {
          text: "",
        },

        xAxis: {
          categories: data.categories,
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#AFECFF",
              fontSize: 12 * this.scale,
            },
          },
          lineColor: "#85b4d0",
        },
        yAxis: {
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#AFECFF",
              fontSize: 12 * this.scale,
            },
          },
          minorGridLineWidth: 0,
          lineWidth: 0,
          tickWidth: 0,
          tickPosition: "inside",
          tickmarkPlacement: "between",
          tickColor: "#AFECFF",
          gridLineWidth: 1,
          gridLineColor: "#57789a",
          tickInterval: 10,
        },
        legend: {
          enabled: true,
          orient: "vertical",
          align: "right",
          float: true,
          position: "bottom",
          itemStyle: {
            color: "#AFECFF",
            fontSize: 12 * this.scale + "px",
          },
          itemHoverStyle: {
            color: "#ffffff",
          },
          itemMarginBottom: 5 * this.scale,
          squareSymbol: false,
          //   symbolWidth: 24 * this.scale,
          // symbolHeight: 2*this.scale,
          // symbolPadding: 5*this.scale,
          // symbolRadius: 2*this.scale,
          // width: '64%'
        },
        tooltip: {
          shared: true,
        },
        plotOptions: {
          spline: {
            dataLabels: {
              enabled: false, // dataLabels设为true
              style: {
                color: "#fff",
                fonstSize: 12 * this.scale,
              },
            },
            marker: {
              enabled: true,
              // radius: 4*this.scale,
              lineWidth: 1,
            },
          },
        },
        series: data.series,
      };
      HighCharts.chart("weekChart", options);
    },
    setChartData() {
      let categories = this.data.map((item) => item.date);
      let series = [];
      if (this.type == "gas") {
        series = [
          {
            name: "报警数量",
            data: this.data.map((item) => item.weekGasCount),
          },
        ];
      }
      if (this.type == "fireControl") {
        series = [
          {
            name: "电气报警",
            data: this.data.map((item) => item.weeFileCount),
          },
          {
            name: "消防水报警",
            data: this.data.map((item) => item.weeWaterCount),
          },
          {
            name: "烟感报警",
            data: this.data.map((item) => item.weeSmokeCount),
          },
          {
            name: "其他报警",
            data: this.data.map((item) => item.weeOtherCount),
          },
        ];
      }
      if (this.type == "pool") {
        series = [
          {
            name: "液位报警",
            data: this.data.map((item) => item.weekLevelCount),
          },
          {
            name: "液压报警",
            data: this.data.map((item) => item.weekHydraulicPressureCount),
          },
        ];
      }
      if (this.type == "smoke") {
        series = [
          {
            name: "烟雾报警",
            data: this.data.map((item) => item.weekSmokeCount),
          },
          {
            name: "信号异常",
            data: this.data.map((item) => item.weekSignalCount),
          },
        ];
      }
      if (
        this.type == "monitor" ||
        this.type == "video" ||
        this.type == "kitchen" ||
        this.type == "health"
      ) {
        series = [
          {
            name: "火焰报警",
            data: this.data.map((item) => item.weekFireCount),
          },
          {
            name: "消防通道",
            data: this.data.map((item) => item.weekPassWayCount),
          },
          {
            name: "脱岗离岗",
            data: this.data.map((item) => item.weekLeaveCount),
          },
          {
            name: "电动车识别",
            data: this.data.map((item) => item.weekElectricVehicleCount || 0),
          },
        ];
      }
      if (this.type == "fire" || this.type == "chargingStation") {
        series = [
          {
            name: "电流报警",
            data: this.data.map((item) => item.weekCurrentCount),
          },
          {
            name: "温度报警",
            data: this.data.map((item) => item.weekTemperatureCount),
          },
          {
            name: "漏电流报警",
            data: this.data.map((item) => item.weekLeakageCurrentCount),
          },
          {
            name: "电压报警",
            data: this.data.map((item) => item.weekVoltageCount),
          },
        ];
      }
      if (this.type == "extinguisher") {
        series = [
          {
            name: "挪用报警",
            data: this.data.map((item) => item.weekEmbezzlementCount),
          },
          {
            name: "压力报警",
            data: this.data.map((item) => item.weekPressureCount),
          },
        ];
      }
      // 因后端接口问题todayFireAlarmCount，todayFaultCount，todaySystemEventCount参数名均是today，但实际数据为week
      if (this.type == "auto") {
        series = [
          {
            name: "火警",
            data: this.data.map((item) => item.todayFireAlarmCount),
          },
          {
            name: "故障",
            data: this.data.map((item) => item.todayFaultCount),
          },
          {
            name: "系统事件",
            data: this.data.map((item) => item.todaySystemEventCount),
          },
        ];
      }
      if (this.type == "waterPump") {
        series = [
          {
            name: "电压故障",
            data: this.data.map((item) => item.weekVoltageCount),
          },
        ];
      }
      // 智慧加油站
      if (this.type == "gasStation") {
        series = [
          {
            name: "人员监测",
            data: this.data.map((item) => item.weekPersonnelDetectionCount),
          },
          {
            name: "卸油分析",
            data: this.data.map((item) => item.weekUnloadingAnalysisCount),
          },
        ];
      }
      // 智慧梯控
      if (this.type == "ladderControl") {
        series = [
          {
            name: "电动车识别",
            data: this.data.map((item) => item.weekElectricVehicleCount),
          },
        ];
      }
      // 智慧水域
      if (this.type == "waters") {
        series = [
          {
            name: "警戒识别",
            data: this.data.map((item) => item.weekAlertIdentificationCount),
          },
        ];
      }
      // 慧眼识别
      if (this.type == "eye") {
        series = [
          {
            name: "消防通道",
            data: this.data.map((item) => item.weekPassWayCount),
          },
          {
            name: "脱岗离岗",
            data: this.data.map((item) => item.weekLeaveCount),
          },
          {
            name: "火焰报警",
            data: this.data.map((item) => item.weekFireCount),
          },
        ];
      }
      // 慧眼识别
      if (this.type == "kitchen") {
        series = [
          {
            name: "砧板混用",
            data: this.data.map((item) => item.weekCuttingBoardMixingCount),
          },
          {
            name: "未二次更衣",
            data: this.data.map((item) => item.weekDressingCount),
          },
          {
            name: "抹布乱摆放",
            data: this.data.map((item) => item.weekRagCount),
          },
          {
            name: "未穿工装",
            data: this.data.map((item) => item.weekWorkClothesCount),
          },
          {
            name: "违规吸烟",
            data: this.data.map((item) => item.weekSmokeCount),
          },
          {
            name: "违规进专间",
            data: this.data.map((item) => item.weekSpecialRoomCount),
          },
          {
            name: "老鼠抓拍",
            data: this.data.map((item) => item.weekMouseCaptureCount),
          },
          {
            name: "违规玩手机",
            data: this.data.map((item) => item.weekMobilePhoneCount),
          },
          {
            name: "垃圾桶未盖",
            data: this.data.map((item) => item.weekTrashCanCount),
          },
          {
            name: "未戴口罩",
            data: this.data.map((item) => item.weekMaskCount),
          },
          {
            name: "台面未清洁",
            data: this.data.map((item) => item.weekTableNotCleanedCount),
          },
          {
            name: "未戴工帽",
            data: this.data.map((item) => item.weekWorkHatCount),
          },
        ];
      }
      // 仓库
      if (this.type == "warehouse") {
        series = [
          {
            name: "电气报警",
            data: this.data.map((item) => item.weeFileCount),
          },
          {
            name: "消防水报警",
            data: this.data.map((item) => item.weeWaterCount),
          },
          {
            name: "烟感报警",
            data: this.data.map((item) => item.weeSmokeCount),
          },
          {
            name: "水浸",
            data: this.data.map((item) => item.weeWaterImmersionCount),
          },
          {
            name: "慧眼识别",
            data: this.data.map((item) => item.weeSmartEyeCount),
          },
          {
            name: "灭火器",
            data: this.data.map((item) => item.weeFireExtinguisherCount),
          },
          {
            name: "气体",
            data: this.data.map((item) => item.weeGasCount),
          },
          {
            name: "其他",
            data: this.data.map((item) => item.weeOtherCount),
          },
          // {
          //   name: "温度",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "湿度",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "人员离岗",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "烟火识别",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "消防通道占用",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "安全帽识别",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
          // {
          //   name: "安全帽识别",
          //   data: this.data.map((item) => item.weeOtherCount),
          // },
        ];
      }
      this.chartData = {
        categories: categories,
        series: series,
      };
    },
  },
  mounted() {
    this.setChartData();
    if (this.chartData) {
      this.renderChart();
    }
  },
};
</script>
